// 源插件
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';

// 视图插件
import {
  Spin,
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Upload,
  Empty,
  Table,
} from 'antd';
// 外部组件
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../FundPosition/Test.less';
import WrappedDynamicFieldSet from './DynamicFieldSet';

// css OR less预编译器

// 图片

const FormItem = Form.Item;

/**
 *  Created by xjc on 2019/8/15
 *  Describe:数据连接
 */

@Form.create()
class BillUpload extends PureComponent {
  componentWillMount() {}

  state = {
    formData: [],
  };

  onChange = e => {};

  okHandle() {
    const { isRy, record, isUpdate } = this.props;

    this.props.form.validateFields((err, values) => {
      let inputUpdate = false;
      if (isUpdate) {
        if (
          values.billId !== record.billId ||
          values.iscnumber !== record.billNumber ||
          values.frncoupon !== record.name ||
          values.redeemPrice !== record.redeemableType ||
          values.price !== record.amountOfMoney ||
          values.x !== record.discountRate ||
          values.p !== record.billCoupon ||
          values.transactionDate.format('YYYY-MM-DD') !== record.discoveryDate ||
          values.finalDate.format('YYYY-MM-DD') !== record.finalPriceDate
        ) {
          inputUpdate = true;
        }
      }

      if (!err) {
        this.child.handleSubmit({
          id: record.pid,
          billId: values.billId,
          billType: values.billType,
          currency: values.currency,
          d: values.d,
          finalDate: values.finalDate.format('YYYY-MM-DD HH:mm:ss'),
          frncoupon: values.frncoupon,
          iscnumber: values.iscnumber,
          p: values.p,

          price: values.price,
          productDataDetailForms: [],
          productID: isRy,
          redeemPrice: values.redeemPrice,
          s: values.s,
          transactionDate: values.transactionDate.format('YYYY-MM-DD HH:mm:ss'),
          inputUpdate,
          x: values.x,
        });
        // console.log('Received values of form: ', values);
      }
    });
  }

  cancelHandle() {
    this.props.closeRecord(false);
  }

  closeRecord() {
    this.props.closeRecord(true);
  }

  render() {
    const {} = this.state;
    const { record, form, RiskDetailVisible, title, isRy, isUpdate } = this.props;
    const { getFieldDecorator } = form;
    const config = {
      rules: [{ type: 'object', required: true, message: '请选择日期' }],
    };
    return (
      <Modal
        width={1280}
        destroyOnClose
        title={title}
        visible={RiskDetailVisible}
        centered
        onOk={this.okHandle.bind(this)}
        onCancel={this.cancelHandle.bind(this)}
      >
        <Form layout="horizontal" onSubmit={this.handleSubmit} style={{ overflowY: 'scroll' }}>
          <div>
            <Row>
              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="票据类型" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}>
                    {getFieldDecorator('billType', {
                      rules: [
                        {
                          required: isRy && !isUpdate,
                          message: '请选择票据类型',
                        },
                      ],
                    })(
                      isUpdate ? (
                        <Input readOnly style={{ width: '85%' }} />
                      ) : isRy === '1' || isRy === '3' ? (
                        <Select style={{ width: '100%' }}>
                          <Option key={1}>RCN反向可转换票据</Option>
                          <Option key={2}>雙嬴票据 Twin Win</Option>
                          <Option key={3}>CRN 担保票据</Option>
                          <Option key={4}>回望票据</Option>
                          <Option key={5}>奖励表现票据</Option>
                        </Select>
                      ) : (
                        <Select style={{ width: '100%' }}>
                          <Option key={6}>可赎回定息票据</Option>
                          <Option key={7}>红利增益票据</Option>
                        </Select>
                      )
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="货币类型" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}>
                    {getFieldDecorator('currency', {
                      initialValue: isUpdate ? '' : 'USD',
                    })(
                      isUpdate ? (
                        <Input readOnly style={{ width: '85%' }} />
                      ) : (
                        <Select style={{ width: '85%' }}>
                          <Option key="USD">USD</Option>
                          <Option key="CNY">CNY</Option>
                          <Option key="HKD">HKD</Option>
                        </Select>
                      )
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="序号" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }}>
                    {getFieldDecorator('billId', {
                      initialValue: isUpdate ? record.billId : '',
                      rules: [
                        {
                          required: true,
                          message: '请填写序号',
                        },
                      ],
                    })(<InputNumber style={{ width: '85%' }} placeholder="序号" />)}
                  </FormItem>
                </Col>
              </Col>
            </Row>
            <Row>
              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="票据编号" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('iscnumber', {
                      initialValue: isUpdate ? record.billNumber : '',
                      rules: [
                        {
                          required: true,
                          message: '请填写票据编号',
                        },
                      ],
                    })(<Input style={{ width: '85%' }} placeholder="票据编号" />)}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="票据名称" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('frncoupon', {
                      initialValue: isUpdate ? record.name : '',
                      rules: [
                        {
                          required: false,
                          message: '请填写票据名称',
                        },
                      ],
                    })(<Input style={{ width: '85%' }} placeholder="票据名称" />)}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="可赎回类别" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('redeemPrice', {
                      initialValue: isUpdate ? record.redeemableType : '',
                      rules: [
                        {
                          required: false,
                          message: '请填写可赎回类别',
                        },
                      ],
                    })(<Input style={{ width: '85%' }} placeholder="例如：每一个月" />)}
                  </FormItem>
                </Col>
              </Col>
            </Row>

            <Row>
              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="金额" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('price', {
                      initialValue: isUpdate ? record.amountOfMoney : '',
                      rules: [
                        {
                          required: true,
                          message: '请填写金额',
                        },
                      ],
                    })(
                      <InputNumber
                        min={1}
                        max={100000000000}
                        style={{ width: '85%' }}
                        placeholder="金额"
                      />
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="折扣率" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('x', {
                      initialValue: isUpdate ? record.discountRate : '',
                      rules: [
                        {
                          required: false,
                          message: '请填写折扣率',
                        },
                      ],
                    })(
                      <InputNumber
                        style={{ width: '85%' }}
                        placeholder="例如：0.10"
                        min={0}
                        max={1}
                        step={0.1}
                      />
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="上升参与率" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('s', {
                      rules: [
                        {
                          required: false,
                          message: '请填写上升参与率',
                        },
                      ],
                    })(
                      <InputNumber
                        readOnly={isUpdate}
                        style={{ width: '85%' }}
                        placeholder="例如：0.10"
                        min={0}
                        max={1}
                        step={0.1}
                      />
                    )}
                  </FormItem>
                </Col>
              </Col>
            </Row>

            <Row>
              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="票息" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('p', {
                      initialValue: isUpdate ? record.billCoupon : '',
                      rules: [
                        {
                          required: true,
                          message: '请填写票息',
                        },
                      ],
                    })(
                      <InputNumber
                        style={{ width: '85%' }}
                        placeholder="例如：0.10"
                        min={0}
                        max={1}
                        step={0.1}
                      />
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="担保" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('d', {
                      rules: [
                        {
                          required: false,
                          message: '请填写担保',
                        },
                      ],
                    })(
                      <InputNumber
                        readOnly={isUpdate}
                        style={{ width: '85%' }}
                        placeholder="担保"
                      />
                    )}
                  </FormItem>
                </Col>
              </Col>

              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="发行日期" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('transactionDate', {
                      initialValue: isUpdate ? moment(record.discoveryDate, 'YYYY/MM/DD') : '',
                      rules: [{ required: true, message: '发行日期' }],
                    })(<DatePicker />)}
                  </FormItem>
                </Col>
              </Col>
            </Row>

            <Row>
              <Col xl={7} lg={24} md={24} sm={24} xs={24} offset={1}>
                <Col span={24}>
                  <FormItem label="最终比价日" labelCol={{ span: 8 }} wrapperCol={{ span: 15 }}>
                    {getFieldDecorator('finalDate', {
                      initialValue: isUpdate ? moment(record.finalPriceDate, 'YYYY/MM/DD') : '',
                      rules: [{ required: true, message: '请选择最终比价日' }],
                    })(<DatePicker />)}
                  </FormItem>
                </Col>
              </Col>
            </Row>
          </div>
          <WrappedDynamicFieldSet
            onRef={this.onRef}
            closeRecord={this.closeRecord.bind(this)}
            record={isUpdate ? record.productDataDetailForms : []}
            isUpdate={isUpdate}
            handleSubmit1={this.okHandle.bind(this)}
          />
        </Form>
      </Modal>
    );
  }

  onRef = ref => {
    this.child = ref;
  };

  componentDidMount() {}

  componentWillUnmount() {}
}

export default BillUpload;
